import React from 'react'
import {useDispatch,useSelector} from "react-redux"
import * as action from "../action/index"
import {useEffect} from "react"
import {debounce,throttle} from "lodash" // 防抖
import { Collapse } from 'react-vant';
import { StarO } from '@react-vant/icons';
import {useNavigate} from "react-router-dom"
function Menu() {
   let navgiate = useNavigate()
   let store = useSelector(state=>({...state.reducer}))
   let dispatch = useDispatch()
   useEffect(()=>{
    dispatch(action.getlist()) 
   },[])
   let Collection = (index,ind)=>{
       dispatch(action.collection(index,ind))
   }
   let goDetail = ()=>{
      navgiate("/my")
   }
  return (
      <>
        
        {/* <button onClick={debounce(fn.bind(window,111),2000)}>点击</button> */}
        {
            store.arr && store.arr.length ?  store.arr.map((item,index)=>{
                return  (

                    <Collapse initExpanded={['1']} key={index}>
                         <Collapse.Item title={item.tit} name={index} key={index}> 
                             {
                                 item.children &&  item.children.length?  item.children.map((val,ind)=>{
                                    return <div  style={{borderBottom:"1px solid #ccc"}}key={ind}>{val.tit} <span style={{float:"right"}} onClick={()=>Collection(index,ind)}>{val.flag?<StarO color='#f44336' />:<StarO/>}</span> </div>
                                 }):"暂无数据"
                             }
                         
                         </Collapse.Item>
                    </Collapse>

                )
              
            }):"暂无数据"
        }
        <button onClick={debounce(goDetail,2000)}>去我的收藏页面</button>
   </>
  )
 
}

export default Menu